import React from 'react'
import { Link } from 'react-router-dom'
import Tags from './Tags'

function ArticlesPreview({ article }) {
  return (
    <div className="article-preview">
      <div className="article-meta">
        <Link to={`/@${article.author.username}`}>
          <img src={article.author.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'}
            alt={article.author.username} />
        </Link>
        <div className="info">
          <Link className="author" to={`/@${article.author.username}`}>
            {article.author.username}
          </Link>
          <span className="date">
            {new Date(article.createdAt).toDateString()}
          </span>
        </div>
        <button className="btn btn-outline-primary btn-sm pull-xs-right">
          <i className="ion-heart"></i> {article.favoritesCount}
        </button>
      </div>
      <Link to={`/article/${article.slug}`} className="preview-link">
        <h1>{article.title}</h1>
        <p>{article.description}</p>
        <span>Read more...</span>
        <ul className="tag-list">
          <Tags tags={article.tagList} showEmptyInfo={false} outline={true}/>
        </ul>
      </Link>
    </div >
  )
}

export default ArticlesPreview